<script lang="ts" setup generic="T">
defineProps<{
  title: string
  description?: string
}>()

const pendingDeleteItem = defineModel<T | null>({ required: true })

const [state, toggle] = useToggle()

watch(pendingDeleteItem, value => void (value && toggle(true)))

function close() {
  toggle(false)
}

function onAfterLeaveClear() {
  pendingDeleteItem.value = null
}

const emits = defineEmits<{
  confirm: []
}>()

function onClickConfirm() {
  emits('confirm')
}
</script>

<template>
  <UModal
    v-model:open="state"
    :title
    :description
    :ui="{ footer: 'justify-end gap-3' }"
    @after:leave="onAfterLeaveClear"
  >
    <template #body>
      <slot :="{ close }" />
    </template>
    <template #footer>
      <UButton color="neutral" variant="soft" @click="close">
        {{ $t('common.cancel') }}
      </UButton>
      <UButton color="error" variant="soft" @click="onClickConfirm">
        {{ $t('common.confirm') }}
      </UButton>
    </template>
  </UModal>
</template>
